<template>
  <div class="box">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">primary</el-button>
      <el-button type="success">success</el-button>
      <el-button type="info">info</el-button>
      <el-button type="warning">warning</el-button>
      <el-button type="danger">danger</el-button>
    </el-row>

    <el-row>
      <el-select v-model="value" placeholder="请选择">
        <el-option clearable v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-row>

     <el-row>
       <el-input></el-input>
    </el-row>
    <el-button @click="changeRoute">切换路由</el-button>
  </div>
</template>

<script>
export default {
  name: "theme_message",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
        {
          value: "选项6",
          label: "北京烤鸭",
        },
        {
          value: "选项7",
          label: "北京烤鸭",
        },
        {
          value: "选项8",
          label: "北京烤鸭111111111111111111111111111111111111111",
        },
      ],
      value: "",
    };
  },
  created() {
  },
  mounted() {
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
    },
  },
  methods: {
    changeRoute() {
      /* 1 push path  ,会直接去对后的deng替换路由后的变量参数key */
      // this.$router.push({ path: "/main/theme_message/deng",query:{key:'deng2',age:'20'}});

      /* 2 push name ,会在params参数里找到路由后的变量拼接 */
      this.$router.push({
        name: "theme_message",
        params: { age: "20", key: "deng2" },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// .box {
//   color: @yellow;
// }
</style>
